<!--
 * @Author: liaoxing
 * @Date: 2021-11-11 15:02:40
 * @LastEditors: liaoxing
 * @LastEditTime: 2021-11-29 11:16:33
 * @Description: liaoxing created
 * @FilePath: \品新集成管理系统\pin-xin-admin\src\components\contentNavModule\contentNavModule.vue
-->
<template>
  <div class="contentNavModule flex flex-align-center">
    <!-- 新建报表按钮 -->
    <div class="addBox2">
      <el-button type="primary" size="small" @click="addReports">新建报表</el-button>
    </div>
    <!-- 显示切换 -->
    <!-- <div class="selectBox">
      <el-select v-model="modelType" placeholder="请选择" size="mini" @change="modelChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div> -->
    <!-- 分页 -->
    <!-- <el-pagination
      @current-change="handleCurrentChange"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="100">
    </el-pagination> -->
    <!-- 搜索 -->
    <div class="navModuleSearchBox">
      <el-form :inline="true">
        <el-form-item label="报表名称">
          <el-input size="small" v-model="searchData.name"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input size="small" v-model="searchData.creater"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="warning" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'contentNavModule',
  data () {
    return {
      searchData: {
        name: '',
        creater: ''
      },
      modelType: 1,
      options: [
        // {
        //   value: 0,
        //   label: "视图"
        // },
        // {
        //   value: 1,
        //   label: "列表"
        // }
      ],
      openTreeSelect: false,
    }
  },
  methods: {
    onSubmit () {
      this.$emit('searchList', this.searchData)
    },
    onReset () {
      this.searchData.name = ''
      this.searchData.creater = ''
      this.$emit('resetReportList', this.searchData)
    },
    // handleCurrentChange(val) {
    //   this.$emit('changePage', val)
    // },
    /*切换模式 */
    // modelChange (type) {
    //   this.$emit('changeMode', type)
    // },
    /* 新建报表 */
    addReports () {
      this.$emit('addReports')
    }
  }
}
</script>

<style lang="less" scoped>
.contentNavModule{
  height: 66px;
  width: 100%;
  justify-content: space-between;
  background: white;
  box-sizing: border-box;
  margin-bottom: 10px;
  .addBox2{
    margin-left: 10px;
  }
  .navModuleSearchBox{
    height: 32px;
    // width: 400px;
    position: relative;
    .treeBox{
      position: absolute;
      width: 100%;
      height: 300px;
      background-color: rgb(255, 255, 255);
      top: 36px;
      left: 0;
      border-radius: 4px;
      box-shadow: 0 0 2px 2px rgb(226, 226, 226);
      z-index: 99999;
      overflow: auto;
    }
  }
  .selectBox{
    .el-select{
      width: 80px;
    }
    width: 276px;
  }
}
</style>